<!--
 * @Description: 价格明细
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-14 13:43:04
 * @FilePath: /yuxiuproweb/src/views/mes/pro/workorder/mods/room/decorate/subtotal.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    v-dialogDrag
    title="价格明细"
    :visible.sync="shows"
    width="700px"
    append-to-body
  >
    <el-table ref="multipleTable" :data="priceList" border>
      <el-table-column label="名称" prop="name" min-width="130">
        <template slot-scope="{ row }">
          <el-input
            style="width: 100%"
            v-model="row.name"
            :disabled="`${row.custom}` !== '1'"
            type="text"
            placeholder="请输入"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="price" min-width="90">
        <template slot-scope="{ row }">
          <el-input-number
            v-model="row.price"
            controls-position="right"
            :min="0"
            :precision="2"
            size="mini"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="quantity" min-width="90">
        <template slot-scope="{ row }">
          <el-input-number
            v-model="row.quantity"
            :disabled="`${row.custom}` !== '1'"
            controls-position="right"
            :min="0"
            :precision="2"
            size="mini"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计" prop="subTotal" min-width="70">
        <template slot-scope="{ row }">
          {{ ((+row.price || 0) * +row.quantity).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60" align="center">
        <template slot-scope="{ row, $index }">
          <i
            class="el-icon-remove-outline"
            style="color: red; cursor: pointer"
            @click="handleRemove(row, $index)"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <el-button size="mini" style="width: 100%" class="mt10" @click="addTotal"
      >添加</el-button
    >
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDetailList, updateDetail } from "@/api/asc/curtain";
export default {
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      priceList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    console.log(this.data);
    this.data.orderCustomWindowCurtainId && this.getDetailList();
  },
  methods: {
    getDetailList() {
      getDetailList({
        productId: this.data.orderCustomWindowCurtainId,
        type: "1",
      }).then(({ rows }) => {
        this.priceList = rows || [];
      });
    },
    // 添加小记
    addTotal() {
      this.priceList.push({
        name: "",
        price: "",
        quantity: "",
        subTotal: "",
        type: "1",
        custom: "1", // 自定义
        productId: this.data.orderCustomWindowCurtainId,
      });
    },
    // 删除
    handleRemove(row, index) {
      this.priceList.splice(index, 1);
    },
    // 保存
    submitForm() {
      const list = this.priceList.map((e) => {
        return {
          ...e,
          ...(e.custom === "1"
            ? {
                subTotal: e.price * e.quantity,
              }
            : {}),
        };
      });
      updateDetail(list).then((res) => {
        this.$message.success("操作成功");
        this.shows = false;
        this.$emit("update");
      });
    },
  },
};
</script>
